<template>
    <div class="container">
        <div class="hot">
            <h2 class="title">中国 <span>CHINA</span> <i>热门目的地</i></h2>
            <div class="area">
                <span v-for="i in hot" :key="i.ID" @click="goDetails(i.ID)">
                    <img :src="i.img[0]" alt="">
                    <h4>{{ i.yyj_jing_qu }}</h4>
                </span>
            </div>
        </div>

        <div class="site">
            <h2 class="title">中国游记 <span>什么是优质游记？申请必看</span></h2>
            <div class="bourn">
                <ul>
                    <li v-for="i in recommendInfo" :key="i.ID" @click="goDetails(i.ID)">
                        <div class="left">
                            <img :src="i.img[1]" alt="">
                        </div>
                        <div class="right">
                            <div class="scence">{{ i.yyj_jing_qu }}</div>
                            <div class="address"><span>地址：</span> {{ i.yyj_di_zhi }}</div>
                            <div class="clock">
                                <SvgIcon name="clock" width="15" height="15" /> <span>2025年必打卡景点</span>
                            </div>
                            <div class="recom">{{ i.jieshao }}</div>
                            <div class="heat">{{ i.yyj_re_du }}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useScenicStore } from '@/stores/modules/scenic';
const scenicStore = useScenicStore()

import { useRouter } from 'vue-router';
let $router = useRouter()

let hot = ref<any>([])

let recommendInfo = ref<any>([])
const getRecommendInfo = async () => {
    recommendInfo.value = (await scenicStore.getRecommend()).data
    hot.value = recommendInfo.value.slice(25, 31)
}

const goDetails = (id: any) => {
    $router.push({ name: 'Bourn', params: { id } })
}

onMounted(() => {
    getRecommendInfo()
})

</script>

<style scoped lang="scss">
.container {
    width: 100%;
    color: #333333;


    .hot {
        .title {
            font-size: 20px;
            margin-bottom: 10px;

            span {
                color: #ccd6e5;
                margin: 0 10px 0 5px;
            }

            i {
                font-size: 15px;
            }
        }

        .area {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; // fr相当于份数 这里有四个表示有四列
            gap: 10px;

            span {
                display: block;
                height: 250px;
                position: relative;
                cursor: pointer;

                img {
                    width: 100%;
                    height: 100%;
                }

                h4 {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    padding: 5px 0;
                    text-align: center;
                    box-shadow: inset 0 10px 5px -5px rgba(0, 0, 0, 0.3);
                    font-weight: 600;
                    color: #fff;
                }
            }

        }
    }


    .site {
        margin-top: 20px;

        .title {
            font-size: 20px;
            margin-bottom: 10px;

            span {
                font-size: 15px;
                color: #ccd6e5;
                margin: 0 10px 0 5px;
            }
        }

        .bourn {
            width: 100%;

            ul {

                li {
                    width: 100%;
                    height: 200px;
                    display: flex;
                    justify-content: space-between;
                    border: 1px solid #eee;
                    transition: all 0.3s;
                    cursor: pointer;
                    margin-bottom: 10px;
                    background-color: #fff;

                    .left {
                        width: 30%;
                        height: 100%;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 5%;
                        }
                    }

                    .right {
                        width: 68%;
                        height: 100%;
                        position: relative;

                        .heat {
                            position: absolute;
                            left: 0;
                            bottom: 10px;
                        }

                        .scence {
                            font-weight: 500;
                            font-size: 20px;
                        }

                        .address {

                            span {
                                font-weight: 500;
                            }
                        }

                        .clock {
                            display: flex;
                            align-items: center;
                            background-color: #ffeedf;
                            width: 160px;
                            padding: 5px;
                            border-radius: 10%;
                            justify-content: center;
                            margin: 10px 0;

                            span {
                                display: block;
                                margin-left: 3px;
                                font-size: 12px;
                                color: #673114;
                            }
                        }

                        .recom {
                            font-size: 14px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            /* 可以设置为所需的行数 */
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }

                li:hover {
                    box-shadow: 0 0 4px 0;
                }
            }
        }
    }
}
</style>